<template>
	<section class="taskStatistics">
		<el-row>
			<el-col :span="24">任务名称：{{taskName}}</el-col>
		</el-row>
		<el-row class="margin-table">
            <el-table :data="tableList" v-model="tableList" border style="width: 100%;">
                <el-table-column prop="sku"  label="sku关键词" align='center'>
                	<template scope="scope">
                        <div class="customer_col">
	                        <span @click="handleToDetail(scope.row)"  :class="{ active: scope.row.visited == true }">
	                            {{ scope.row.customerName}}
	                        </span>
	                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="fake" label="假货" align='center'></el-table-column>
                <el-table-column prop="authorizedLowPricePC" label="授权低价(PC)" align='center' ></el-table-column>
                <el-table-column prop="notAuthorizedLowPricePC" label="非授权低价(PC)" align='center' ></el-table-column>
                <el-table-column prop="authorizedLowPriceAPP" label="授权低价(APP)" align='center' ></el-table-column>
                <el-table-column prop="notAuthorizedLowPriceAPP" label="非授权低价(APP)" align='center' ></el-table-column>
            </el-table>
        </el-row>
		<el-row class="paging" style='margin-top: 40px;'>
			<el-pagination
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="pagingUserData.pageNum"
				:page-sizes="pagingUserData.pageSizes"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pagingUserData.total">
			</el-pagination> 
		</el-row>
	</section>
</template>

<script>
	import Vue from 'vue'
	import {Row,Col,Table,TableColumn,Pagination} from 'element-ui'
	import { mapGetters} from 'vuex';
	
	Vue.use(Row);
	Vue.use(Col);
	Vue.use(Table);
	Vue.use(TableColumn);
	Vue.use(Pagination);
	
	export default{
		head(){
			return {
	            title: this.title
	        }
		},
		data(){
			return {
      			tabName: '任务统计',
            	title: '任务统计',
            	taskName:'品牌1-任务007务',
            	tableList:[],
				pageSize: 10, // 每页条数
				pageNum: 1,
				pagingUserData: {
                    pageSizes: [10, 20, 50],	// 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
           }
		},
		
		computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList',
				'currentPage': 'currentPageShopManage',
                'totalCount': 'totalCountShopManage',
                'pageSize': 'pageSizeShopManage',
            }),
		},
		mounted(){
			
		},
		methods: {
			handleCurrentChange(val) {
				this.pageNum = val;
	        },
	        handleSizeChange(val) {
	        	this.pageSize = val;
				this.pageNum = 1;
	        },
			//跳转到活动明细
            handleToDetail(row) {
				let arr = this.visitedUrl;
                arr.push(row.id);
                arr = uniqueArr(arr);
                this.$store.commit('VISITEDURL',{visitedUrl:arr});

                this.$router.push({path: '/customer/detail?id=' + row.id + '&customerContactId=' + row.customerContactId + '&from=index&customerName=' + row.customerName})
            },
		},
		created() {
			//pageTab
			if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
		}
		
	}
</script>

<style lang="scss">
	.taskStatistics{
		.el-col-24{
			height: 40px;
			line-height: 40px;
			background: #eee;
			padding-left: 10px;
		}
		
		
		.customer_col {
            cursor: pointer;
		    span {
	            display: block;
				color: #20a0ff;
                word-break: normal;
		        img {
		            margin-right: 5px;
		            cursor: pointer
		        }
		    }
		    span.active {
                color: #48576a;
            }
	    }
	}
</style>